<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 分支结构在dom树里只有满足条件的才显示 -->
        <div v-if='score>=90'>优秀</div>
        <div v-else-if='score<90 && score>=80'>良好</div>
        <div v-else-if='score<80 && score>=60'>一般</div>
        <div v-else>较差</div>

        
        <!--不管满不满足条件 都在dom树里看见结构 -->
        <div v-show='flag'>测试</div>   

        <!-- 两者的区别
        v-if控制元素是否渲染到页面 有较高的频繁切换消耗
        v-show控制元素是否显示（已经渲染到页面 ）有较高的初始渲染消耗-->
    </div>
</body>
<script src="./V/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            score:60,
            flag:false
        },
        methods:{}
    })
</script>
</html>